<template>
	<view class="technician-commission-detail pt-md" :style="{background:pageColor}" v-if="detail.id">
		<view class="pd-lg fill-base">
			<view class="flex-y-center f-mini-title c-title">
				<view class="dot mr-sm radius" :style="{background:primaryColor}"></view>退款单号<view class="ml-sm">
					{{detail.order_code}}
				</view>
			</view>
			<view class="f-mini-title c-title text-bold mt-lg">退款明细</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">服务时间</view>
				<view class="c-title">{{detail.time_text}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg" v-if="detail.refund_comm_cash*1>0">
				<view class="c-paragraph">退款扣费比列</view>
				<view class="c-title">{{detail.comm_balance}}%</view>
			</view>
			<view class="f-paragraph" :class="[{'mt-lg':index==0},{'mt-md':index!=0}]"
				v-for="(item,index) in detail.order_goods" :key="index">
				<view class="flex-between">
					<span class="c-paragraph max-500">{{item.goods_name}}<span class="ml-md">x{{item.num}}</span></span>
					<view class="c-title">¥{{item.true_total_price}}</view>
				</view>
				<view class="flex-between" style="margin-top: 5rpx;" v-if="item.refund_comm_cash*1>0">
					<span class="c-paragraph max-500"></span>
					<view class="c-warning">
						-¥{{item.refund_comm_cash}}</view>
				</view>
			</view>
			<view class="flex-between mt-lg pt-lg b-1px-t" v-if="detail.refund_comm_cash*1>0">
				<view class="f-paragraph c-paragraph flex-y-center">
					退款手续费合计
				</view>
				<span class="f-caption c-warning">¥<span class="f-mini-title">{{detail.refund_comm_cash}}</span>
				</span>
			</view>
		</view>

		<view class="mt-md pd-lg fill-base">
			<view class="f-mini-title c-title text-bold">补贴明细</view>
			<view class="flex-between f-paragraph mt-lg" v-if="detail.refund_empty_cash*1>0">
				<view @tap.stop="$refs.show_rule_item.open()" class="flex-y-baseline c-paragraph">空单费<i
						class="iconfont iconwentifankui3 ml-sm"></i></view>
				<view class="c-title">¥{{detail.refund_empty_cash}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg" v-if="detail.refund_comm_cash*1>0">
				<view @tap.stop="$refs.show_rule_item.open()" class="flex-y-baseline c-paragraph">退款手续费<i
						class="iconfont iconwentifankui3 ml-sm"></i></view>
				<view class="c-title">¥{{detail.refund_comm_cash}}</view>
			</view>
			<view class="flex-between f-paragraph mt-lg">
				<view class="c-paragraph">获得补贴比列</view>
				<view class="c-title">{{detail.comm_info.balance}}%</view>
			</view>
			<view class="flex-between f-paragraph mt-lg pt-lg b-1px-t">
				<view class="c-paragraph">合计补贴</view>
				<span class="max-500 c-warning">
					{{detail.refund_empty_cash*1>0?detail.refund_empty_cash:detail.refund_comm_cash}} *
					{{detail.comm_info.balance}}% =
					<span class="f-caption text-bold ml-sm">¥<span class="f-mini-title">{{detail.comm_info.cash}}</span>
					</span>
				</span>
			</view>
		</view>

		<view class="space-max-footer"></view>

		<fixed position="bottom">
			<view class="pd-lg fill-base flex-between f-paragraph" style="width:100%">
				<view class="f-mini-title c-title text-bold">实际收益</view>
				<span class="max-500 c-warning">
					<span class="f-caption text-bold ml-sm">¥<span class="f-mini-title">{{detail.comm_info.cash}}</span>
					</span>
				</span>
			</view>
			<view class="space-safe fill-base"></view>
		</fixed>


		<uni-popup ref="show_rule_item" type="center" :maskClick="false" :zIndex="999">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<block v-if="detail.refund_empty_cash*1>0">
					<view class="title">空单费</view>
					<view class="f-desc c-title mt-lg">
						{{$t('action.attendantName')}}到达目的地，客人申请了退款，需支付{{$t('action.attendantName')}}空单费
					</view>
				</block>
				<block v-else>
					<view class="title">退款手续费</view>
					<view class="f-desc c-title mt-lg">
						{{$t('action.attendantName')}}开始服务后，客人申请了退款，需支付{{$t('action.attendantName')}}退款手续费
					</view>
				</block>
				<view class="button">
					<view @tap.stop="$refs.show_rule_item.close()" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				detail: {}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.options = options
			await this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				await this.getDetail()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.isLoad = true
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getDetail() {
				let {
					id
				} = this.options
				let data = await this.$api.technician.commRefundInfo({
					id
				})
				data.order_goods.map(item => {
					item.true_total_price = ((item.goods_price * 1 + item.material_price * 1) * item.num)
						.toFixed(2)
				})
				this.detail = data
			}
		}
	}
</script>


<style lang="scss">
	.technician-commission-detail {
		.dot {
			width: 14rpx;
			height: 14rpx;
		}
	}
</style>